<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>请假待办</title>

    <script src="libs/vue/vue.min.js"></script>
    <link href="libs/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
    <script src="libs/element-ui/lib/index.js"></script>
    <script src="libs/func.js"></script>
</head>
<body>
    <div id="app">
        <el-tabs v-model="activeName" @tab-click="handleTabClick">
            <el-tab-pane label="我的申请" name="myApply"></el-tab-pane>
            <el-tab-pane label="我的待办" name="todo"></el-tab-pane>
        </el-tabs>

        <div v-if="activeName == 'myApply'">
            <el-row type="flex" justify="end">
                <el-col :span="2">
                    <el-button type="primary" icon="el-icon-plus" @click="editDialogVisible = true" size="mini">新增</el-button>
                </el-col>
            </el-row>

            <el-table :data="myApplyTableList" v-loading="myApplyTableLoading" border style="width: 100%">
                <el-table-column
                        prop="id"
                        label="id"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="userId"
                        label="用户ID">
                </el-table-column>
                <el-table-column
                        prop="startTime"
                        label="开始时间"
                        show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column
                        prop="endTime"
                        label="结束时间"
                        show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column
                        prop="leaveType"
                        label="类型"
                        show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column
                        prop="reason"
                        label="原因"
                        show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column
                        prop="applyTime"
                        label="申请时间"
                        show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column
                        prop="wfStatus"
                        label="状态"
                        show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column
                        prop="wfStatusTime"
                        label="更新时间"
                        show-overflow-tooltip="true">
                </el-table-column>

                <el-table-column width="230" fixed="right">
                    <template slot="header" slot-scope="scope">
                        操作
                    </template>

                    <template slot-scope="scope">
                        <el-button v-if="scope.row.wfStatus != undefined && scope.row.wfStatus != 'NEW'" type="text" size="mini" @click="showProcessDiagram(scope.row)">查看流程</el-button>
                        <el-button v-if="scope.row.wfStatus == 'NEW'" type="text" size="mini" @click="startWorkflow(scope.row)">送批</el-button>
                        <!--<el-button v-else="scope.row.wfStatus != 'NEW'" type="text" size="mini" @click="showAudit(scope.row)">审批</el-button>-->
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div v-if="activeName == 'todo'">
            <el-table :data="todoTableList" v-loading="todoTableLoading" border style="width: 100%">
                <el-table-column
                        prop="id"
                        label="id">
                </el-table-column>
                <el-table-column
                        prop="userId"
                        label="用户ID">
                </el-table-column>
                <el-table-column
                        prop="startTime"
                        label="开始时间"
                        show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column
                        prop="endTime"
                        label="结束时间"
                        show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column
                        prop="leaveType"
                        label="类型"
                        show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column
                        prop="reason"
                        label="原因"
                        show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column
                        prop="applyTime"
                        label="申请时间"
                        show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column
                        prop="wfStatus"
                        label="状态"
                        show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column
                        prop="wfStatusTime"
                        label="更新时间"
                        show-overflow-tooltip="true">
                </el-table-column>

                <el-table-column width="230" fixed="right">
                    <template slot="header" slot-scope="scope">
                        操作
                    </template>

                    <template slot-scope="scope">
                        <el-button type="text" size="mini" @click="showProcessDiagram(scope.row)">查看流程</el-button>
                        <el-button type="text" size="mini" @click="showAudit(scope.row)">审批</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <el-dialog title="编辑" :visible.sync="editDialogVisible">
            <el-form :model="editForm">
                <el-form-item label="开始时间" :label-width="formLabelWidth">
                    <el-date-picker v-model="editForm.startTime" type="date" placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间" :label-width="formLabelWidth">
                    <el-date-picker v-model="editForm.endTime" type="date" placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="类型" :label-width="formLabelWidth">
                    <el-input v-model="editForm.leaveType"></el-input>
                </el-form-item>
                <el-form-item label="原因" :label-width="formLabelWidth">
                    <el-input v-model="editForm.reason"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveOrUpdate">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="流程图" :visible.sync="processDiagramDialogVisible">
            <!--<img :src="processDiagramImg" style="max-width: 90%;max-height: 90%;"/>-->
            <el-image :src="processDiagramImg" fit="scale-down" lazy style="min-width: 600px; min-height: 300px; max-width: 90%;max-height: 90%;">

            </el-image>
        </el-dialog>

        <el-dialog title="审批" :visible.sync="auditDialogVisible">
            <el-form :model="auditForm">
                <el-form-item label="审批意见" :label-width="formLabelWidth">
                    <el-radio-group v-model="auditForm.approval" >
                        <el-radio :label="1">同意</el-radio>
                        <el-radio :label="0">拒绝</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="备注" :label-width="formLabelWidth">
                    <el-input type="textarea" v-model="auditForm.comment"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="auditDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="audit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data(){
            return {
                activeName: "myApply",

                formLabelWidth: '120px',

                searchItem: {},
                myApplyCurrent: 1,
                myApplyTotalSize: 0, //总条数
                myApplyPageNum: 1, //开始条数
                myApplyLimit: 50, //每页记录数
                myApplyTableLoading: false,
                myApplyTableList: [],

                todoTableCurrent: 1,
                todoTableTotalSize: 0, //总条数
                todoTablePageNum: 1, //开始条数
                todoTableLimit: 50, //每页记录数
                todoTableLoading: false,
                todoTableList: [],

                processDiagramDialogVisible: false,
                processDiagramUrl: "",
                processDiagramImg: "",

                auditDialogVisible: false,
                auditForm: {
                    flag: 1,
                    comment: ""
                },

                editDialogVisible: false,
                editForm: {
                    id: "",
                    startTime: "",
                    endTime: "",
                    leaveType: "",
                    reason: "",
                    wfStatus: "NEW"
                }
            }
        },
        created(){
            this.queryMyApplyTableList();
        },
        methods: {
            handleTabClick(tab, event){
                if(tab.name == "myApply"){
                    this.queryMyApplyTableList();
                } else if(tab.name == "todo"){
                    this.queryTodoTableList();
                } else if(tab.name == "create"){
                    this.editDialogVisible = true;
                }
            },

            queryMyApplyTableList(){
                this.myApplyPageNum = 1;
                this.myApplyTableList = [];
                this.updateMyApplyTableList();
            },
            changeMyApplyTableCurrent(current) {
                this.myApplyPageNum = current;
                this.myApplyTableList = [];
                this.updateMyApplyTableList();
            },
            updateMyApplyTableList(){
                this.myApplyTableLoading = true
                const reqParams = JSON.parse(JSON.stringify(this.searchItem));
                reqParams.userId = "000001";
                api.postJson(ctx + 'leaveApply/page?current=' + this.myApplyPageNum + '&size=' + this.myApplyLimit,
                    reqParams, (res) => {
                        this.myApplyTableLoading = false
                        if (res.code == "200") {
                            this.myApplyTotalSize = res.data.total;
                            this.myApplyTableList = res.data.records;
                        } else {
                            this.$message({
                                type: "error",
                                message: res.msg,
                                duration: 5000,
                                showClose: true
                            });
                        }
                    });
            },

            queryTodoTableList(){
                this.todoTablePageNum = 1;
                this.todoTableList = [];
                this.updateTodoTableList();
            },
            changeTodoTableCurrent(current) {
                this.todoTablePageNum = current;
                this.todoTableList = [];
                this.updateTodoTableList();
            },
            updateTodoTableList(){
                this.todoTableLoading = true
                const reqParams = JSON.parse(JSON.stringify(this.searchItem));
                reqParams.todoList = true;
                api.postJson(ctx + 'leaveApply/page?current=' + this.todoTablePageNum + '&size=' + this.todoTableLimit,
                    reqParams, (res) => {
                        this.todoTableLoading = false
                        if (res.code == "200") {
                            this.todoTableTotalSize = res.data.total;
                            this.todoTableList = res.data.records;
                        } else {
                            this.$message({
                                type: "error",
                                message: res.msg,
                                duration: 5000,
                                showClose: true
                            });
                        }
                    });
            },

            showProcessDiagram(item){
                this.processDiagramImg = "img/loading.gif";
                var newImg = new Image()
                newImg.src = ctx + "activiti/diagram/" + item.procInstId + "?v=" + item.wfStatusTime;
                newImg.onerror = () => {// 图片加载错误图片
                    newImg.src =
                        'img/loading-img-error.png'
                }
                newImg.onload = () => { // 图片加载成功后
                    this.processDiagramImg = newImg.src
                }

                /*api.get(ctx + "activiti/diagram/" + item.processInstanceId, {}, (res) => {
                    if(res.code == "200"){
                        this.processDiagramImg = "data:image/png;base64," + res.data;
                    } else {
                        this.$message({
                            type: "error",
                            message: res.msg,
                            duration: 5000,
                            showClose: true
                        });
                    }
                })*/
                this.processDiagramDialogVisible = true;
            },

            startWorkflow(item){
                this.$confirm('确认送批吗？', '请确认？', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    const reqParams = JSON.parse(JSON.stringify(item));;

                    api.postJson(ctx + "leaveApply/startWorkflow", reqParams, (res) => {
                        if(res.code == "200"){
                            this.$message({
                                type: 'success',
                                message: '成功!'
                            });
                            this.updateMyApplyTableList();
                        } else {
                            this.$message({
                                type: "error",
                                message: res.msg,
                                duration: 5000,
                                showClose: true
                            });
                        }
                    })
                }).catch((err) => {
                    console.log(err);
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                })
            },

            showAudit(item){
                for(let key in item){
                    this.auditForm[key] = item[key];
                }
                this.auditDialogVisible = true;
            },

            audit(){
                if(this.auditForm.procInstId) {
                    this.$confirm('确认审批吗？', '请确认？', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        const reqParams = {
                            comment: this.auditForm.comment
                        };
                        if(this.auditForm.wfStatus == "BMJLSP"){
                            reqParams.bmjlApproval = this.auditForm.approval;
                        } else if(this.auditForm.wfStatus == "RSSP"){
                            reqParams.rsApproval = this.auditForm.approval;
                        }

                        api.postJson(ctx + "activiti/approval/" + this.auditForm.procInstId, reqParams, (res) => {
                            if(res.code == "200"){
                                this.$message({
                                    type: 'success',
                                    message: '成功!'
                                });
                                this.updateTodoTableList();
                                this.auditDialogVisible = false;
                            } else {
                                this.$message({
                                    type: "error",
                                    message: res.msg,
                                    duration: 5000,
                                    showClose: true
                                });
                            }
                        })
                    }).catch((err) => {
                        console.log(err);
                        this.$message({
                            type: 'info',
                            message: '已取消'
                        });
                    })
                } else {
                    this.$message({
                        type: "error",
                        message: "缺少必要参数，无法审批！",
                        duration: 5000,
                        showClose: true
                    });
                }

            },

            saveOrUpdate(){
                let reqPam = JSON.parse(JSON.stringify(this.editForm));
                api.postJson(ctx + "leaveApply/saveOrUpdate", reqPam, (res) => {
                    if(res.code == "200"){
                        this.$message({
                            type: "success",
                            message: "成功",
                            showClose: true
                        });
                        this.queryMyApplyTableList();
                        this.editDialogVisible = false;
                    } else {
                        this.$message({
                            type: "error",
                            message: res.msg,
                            duration: 5000,
                            showClose: true
                        });
                    }
                })
            },
        }
    })
</script>
</html>